<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            border: 3px solid #000;
            font-size: 30px;
            margin-top: 10px;
        }

        .pink {
            background-color: pink;
        }

        .big {
            width: 300px;
            height: 300px;
        }
    </style>
</head>

<body>
    <div id="app">
        <!--
            v-bind 对于样式控制的增强 - 操作class
            语法 :class ="对象/数组"

            1 对象键就是类名，值是布尔值。如果值为 true，有这个类，否则没有这个类:
                <div class="box" :class="{类名1: 布尔值，类名2: 布尔值}"></div>
                使用场景: 一个类型来回切换
            2 数组数组中所有的类，都会添加到盒子上，本质就是一个 class 列表:
                <div class="box" :class="[ 类名1，类名2，类名3 ]"></div>
                使用场景: 批量添加和删除类
        -->
        <div class="box" :class="{pink: false, big: true}">测试div</div>
        <div class="box" :class="['pink', 'big']">测试div</div>
    </div>

    <script src="../lib/vue.js"></script>

    <script>
        const app = new Vue({
            el: "#app",
            data() {
                return {}
            },
            methods: {
            }
        })
    </script>
</body>

</html>